import React from 'react';
import { Collapse, InterviewIM } from '@/molecules';
import { useCollapse, useRequest, defaultFormatResult } from '@/hooks';
import { Form, Input, Modal, Typography } from 'antd';
import { createImGroup, getConclusionSubmitStatus } from '../services';
import { FormLayout } from '../components';
import { QuestionDetail, EstimateDetail, ArrangeDetail, BottomAction, ConclusionRadioGroup } from '../containers';
import { generateSummaryConclusionOption } from '../utils/interview';
import { CONCLUSION_STATUS_VALUES } from '../constants';

const Container = ({ children }) => <div style={{ width: 900 }}>{children}</div>;
const { Panel } = Collapse;

const { TextArea } = Input;
function InterviewSummary({ form, data }) {
    const { interviewConclusionVO } = data || {};
    const { interviewEvaluateResults, interviewQuestions, interviewArranges } = interviewConclusionVO || {};
    const { id: arrangeId, recordTimeInfo, recordUrl, interviewType, interviewRoundName } = interviewArranges || {};
    const { activeKey, onChange, openAll } = useCollapse(['1', '2', '3', '4', '5'], []);
    const { getFieldDecorator, getFieldValue } = form;

    const { data: imGroupId } = useRequest(
        () =>
            createImGroup({
                arrangeId
            }),
        {
            ...defaultFormatResult
        }
    );
    const onBeforeSubmit = React.useCallback(
        () =>
            new Promise(async (resolve, reject) => {
                const { code, data: flag } = await getConclusionSubmitStatus(arrangeId);
                if (code === 10000) {
                    if (flag) {
                        resolve();
                        return;
                    }
                    Modal.confirm({
                        title: '提示',
                        content: '还有其他面谈参与人未提交面谈记录，是否发起面谈总结？',
                        onOk: () => {
                            resolve();
                        },
                        onCancel: () => {
                            reject();
                        }
                    });
                }
            }),
        [arrangeId]
    );

    const conclusions = React.useMemo(() => generateSummaryConclusionOption(interviewType), [interviewType]);

    const getSubmitValues = React.useCallback(async values => {
        const { resultType, resultContent } = values;
        const next = {
            arrangeId,
            resultType,
            resultContent
        };
        const ret = {
            action: 'probationInterviewConclusion',
            interviewArrangeResultDTO: next
        };
        return ret;
    }, []);

    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <Panel header="新员工面谈安排" key="1">
                    <ArrangeDetail data={interviewArranges} date />
                </Panel>
                <Panel header="面谈评估" key="2">
                    <Container>
                        <EstimateDetail
                            interviewEvaluateResults={interviewEvaluateResults}
                            interviewStatus={-1}
                            audioUrl={recordUrl}
                            completeTimeJson={recordTimeInfo}
                        />
                    </Container>
                </Panel>
                <Panel header="面谈自定义问题" key="3">
                    <Container>
                        <QuestionDetail
                            data={interviewQuestions}
                            audioUrl={recordUrl}
                            completeTimeJson={recordTimeInfo}
                        />
                    </Container>
                </Panel>
                <Panel header="面谈总结" key="4">
                    <Container>
                        <InterviewIM
                            groupId={imGroupId}
                            title={interviewRoundName}
                            readOnly={false}
                            tip="已发起 IM 讨论，系统自动为部门主管、带教人、人事负责人等其他参与人创建讨论群"
                        ></InterviewIM>
                    </Container>
                </Panel>
                <Panel header="综合评价" key="5">
                    <Form>
                        <FormLayout type="full">
                            <Form.Item label="结论">
                                {getFieldDecorator('resultType', {
                                    initialValue: conclusions[0]
                                })(<ConclusionRadioGroup conclusions={conclusions} />)}
                            </Form.Item>
                        </FormLayout>
                        <FormLayout type="full">
                            <Form.Item label=" " colon={false} required={false}>
                                {getFieldDecorator('resultContent', {
                                    initialValue: '',
                                    rules: [
                                        { required: true, message: '请输入评价', whitespace: true },
                                        { max: 500, message: '评价不能超过500个字符' }
                                    ]
                                })(
                                    <TextArea
                                        style={{ width: 340 }}
                                        placeholder="请输入评价"
                                        autoSize={{ minRows: 3, maxRows: 3 }}
                                        maxLength={500}
                                    />
                                )}
                                {getFieldValue('resultType') === CONCLUSION_STATUS_VALUES.TERMINATE && (
                                    <Typography.Paragraph type="secondary">
                                        终止试用后，将自动通知人事为该员工办理离职手续
                                    </Typography.Paragraph>
                                )}
                            </Form.Item>
                        </FormLayout>
                    </Form>
                </Panel>
            </Collapse>
            <BottomAction
                openAll={openAll}
                data={data}
                form={form}
                params={getSubmitValues}
                onBeforeSubmit={onBeforeSubmit}
            />
        </div>
    );
}
export default Form.create()(InterviewSummary);
